<template>
    <div class="white-box">
        <title-more title="客服设置" />
        <el-tabs v-model="tabName" @tab-click="handleTab">
            <el-tab-pane label="平台客服" name="0">
                <el-form ref="ruleRef" :model="ruleForm" :rules="ruleCheck" label-width="120px">
                    <el-form-item label="姓名" prop="name">
                        <el-input v-model.trim="ruleForm.name" clearable placeholder="请输入姓名" />
                    </el-form-item>
                    <el-form-item label="手机号" prop="tel">
                        <el-input
                            v-model.trim="ruleForm.tel"
                            oninput="value=value.replace(/[^\d]/g,'')"
                            maxlength="11"
                            clearable
                            placeholder="请输入手机号"
                        />
                    </el-form-item>
                    <el-form-item label="微信号" prop="wxcode">
                        <el-input v-model.trim="ruleForm.wxcode" clearable placeholder="请输入微信号" />
                    </el-form-item>
                    <el-form-item label="二维码" prop="img_paths" required>
                        <div class="img-box flexs-center" @click.stop="showImg = true" v-if="ruleForm.img_paths == ''">
                            <el-icon color="#999" size="26px">
                                <UploadFilled />
                            </el-icon>
                        </div>
                        <div class="img-selects" v-else>
                            <el-image
                                class="img-selects__pic"
                                :src="proxy.imgUrl + ruleForm.img_paths + '!img_400'"
                                :preview-src-list="srcList"
                                fit="cover"
                            />
                            <div class="img-del" @click.stop="delImg">
                                <el-icon size="14px" color="#fff"><CloseBold /></el-icon>
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item>
                        <div class="flexs" style="margin-top: 30px">
                            <el-button type="primary" :loading="form_loading" @click="submitForm(ruleRef)">确认</el-button>
                            <el-button @click="resetForm(ruleRef)">重置</el-button>
                        </div>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="供应商客服" name="1">
                <el-form ref="ruleTwoRef" :model="ruleTwoForm" :rules="ruleTwoCheck" label-width="120px">
                    <el-form-item label="姓名" prop="name">
                        <el-input v-model.trim="ruleTwoForm.name" clearable placeholder="请输入姓名" />
                    </el-form-item>
                    <el-form-item label="手机号" prop="tel">
                        <el-input
                            v-model.trim="ruleTwoForm.tel"
                            oninput="value=value.replace(/[^\d]/g,'')"
                            maxlength="11"
                            clearable
                            placeholder="请输入手机号"
                        />
                    </el-form-item>
                    <el-form-item label="微信号" prop="wxcode">
                        <el-input v-model.trim="ruleTwoForm.wxcode" clearable placeholder="请输入微信号" />
                    </el-form-item>
                    <el-form-item label="二维码" prop="img_paths" required>
                        <div class="img-box flexs-center" @click.stop="showImg = true" v-if="ruleTwoForm.img_paths == ''">
                            <el-icon color="#999" size="26px">
                                <UploadFilled />
                            </el-icon>
                        </div>
                        <div class="img-selects" v-else>
                            <el-image
                                class="img-selects__pic"
                                :src="proxy.imgUrl + ruleTwoForm.img_paths + '!img_400'"
                                :preview-src-list="srcListTwo"
                                fit="cover"
                            />
                            <div class="img-del" @click.stop="delImg">
                                <el-icon size="14px" color="#fff"><CloseBold /></el-icon>
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item>
                        <div class="flexs" style="margin-top: 30px">
                            <el-button type="primary" :loading="form_loading" @click="submitTwoForm(ruleTwoRef)">确认</el-button>
                            <el-button @click="resetTwoForm(ruleTwoRef)">重置</el-button>
                        </div>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
        </el-tabs>
    </div>

    <!-- 图片库 -->
    <picture-library :show="showImg" :select_multiple="false" @close="showImg = false" @select="selectImg"> </picture-library>

    <go-back />
</template>

<script setup>
import { getCurrentInstance, ref, onMounted, reactive } from "vue"
import { UploadFilled, CloseBold } from "@element-plus/icons-vue"
import GoBack from "@components/GoBack.vue"
import TitleMore from "@components/title-more.vue"
import PictureLibrary from "@components/PictureLibrary.vue"

const { proxy } = getCurrentInstance()

onMounted(() => {
    getOne()
})

const tabName = ref("0")
const handleTab = (pane) => {
    tabName.value = pane.index
    pane.index == 0 && !ruleForm.name && !ruleForm.tel && getOne()
    pane.index == 1 && !ruleTwoForm.name && !ruleTwoForm.tel && getTwo()
}
function getOne() {
    proxy.$axios
        .get("config/service")
        .then((res) => {
            if (res.data.code == 0) {
                let result = res.data.data
                ruleForm.name = result.contact
                ruleForm.tel = result.phone
                ruleForm.wxcode = result.weixin
                ruleForm.img_paths = result.face
            } else {
                proxy.$message({message:res.data.msg,type:"error"})
            }
        })
        .catch((err) => {})
}
function getTwo() {
    proxy.$axios
        .get("config/supplierService")
        .then((res) => {
            if (res.data.code == 0) {
                let result = res.data.data
                ruleTwoForm.name = result.contact
                ruleTwoForm.tel = result.phone
                ruleTwoForm.wxcode = result.weixin
                ruleTwoForm.img_paths = result.face
            } else {
                proxy.$message({message:res.data.msg,type:"error"})
            }
        })
        .catch((err) => {})
}

/**
 * 平台客服
 * @param {Boolean} form_loading 弹窗按钮状态
 * @property {Array} ruleRef 表单规则
 * @property {Object} ruleForm  表单字段
 * @property {Object} ruleCheck  表单提示
 */
const form_loading = ref(false)
const ruleRef = ref(null)
const ruleForm = reactive({
    name: "",
    tel: "",
    wxcode: "",
    img_paths: "",
})
const ruleCheck = reactive({
    name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
    tel: [{ required: true, validator: proxy.$util.validPhone, trigger: "blur" }],
    wxcode: [{ required: true, message: "请输入微信号", trigger: "blur" }],
    img_paths: [{ required: true, message: "请选择二维码", trigger: "change" }],
})
// 确认
const submitForm = (formEl) => {
    if (!formEl) return
    formEl.validate((valid, fields) => {
        if (valid) {
            form_loading.value = true
            let data = {
                contact: ruleForm.name,
                phone: ruleForm.tel,
                weixin: ruleForm.wxcode,
                face: ruleForm.img_paths,
            }
            proxy.$axios
                .post("config/service", data)
                .then((res) => {
                    form_loading.value = false
                    if (res.data.code == 0) {
                        proxy.$message({ message: "保存成功！", type: "success" })
                        getOne()
                    } else {
                        proxy.$message({message:res.data.msg,type:"error"})
                    }
                })
                .catch((err) => {
                    form_loading.value = false
                })
        }
    })
}
const resetForm = (formEl) => {
    if (!formEl) return
    formEl.resetFields()
}

/**
 * 供应商客服
 * @param {Boolean} form_loading 弹窗按钮状态
 * @property {Array} ruleTwoRef 表单规则
 * @property {Object} ruleTwoForm  表单字段
 * @property {Object} ruleTwoCheck  表单提示
 */
const ruleTwoRef = ref(null)
const ruleTwoForm = reactive({
    name: "",
    tel: "",
    wxcode: "",
    img_paths: "",
})
const ruleTwoCheck = reactive({
    name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
    tel: [{ required: true, validator: proxy.$util.validPhone, trigger: "blur" }],
    wxcode: [{ required: true, message: "请输入微信号", trigger: "blur" }],
    img_paths: [{ required: true, message: "请选择二维码", trigger: "change" }],
})
// 确认
const submitTwoForm = (formEl) => {
    if (!formEl) return
    formEl.validate((valid, fields) => {
        if (valid) {
            form_loading.value = true
            let data = {
                contact: ruleTwoForm.name,
                phone: ruleTwoForm.tel,
                weixin: ruleTwoForm.wxcode,
                face: ruleTwoForm.img_paths,
            }
            proxy.$axios
                .post("config/supplierService", data)
                .then((res) => {
                    form_loading.value = false
                    if (res.data.code == 0) {
                        proxy.$message({ message: "保存成功！", type: "success" })
                        getTwo()
                    } else {
                        proxy.$message({message:res.data.msg,type:"error"})
                    }
                })
                .catch((err) => {
                    form_loading.value = false
                })
        }
    })
}
const resetTwoForm = (formEl) => {
    if (!formEl) return
    formEl.resetFields()
}

/**
 * 添加图片
 * @property {Boolean} showImg 显示图片库
 * @property {Function} selectImg 选择图片
 */
const showImg = ref(false)
const srcList = ref([])
const srcListTwo = ref([])
const selectImg = (val) => {
    showImg.value = false
    tabName.value == 0 && (ruleForm.img_paths = val[0].photo)
    tabName.value == 0 && srcList.value.push(proxy.imgUrl + val[0].photo)

    tabName.value == 1 && (ruleTwoForm.img_paths = val[0].photo)
    tabName.value == 1 && srcListTwo.value.push(proxy.imgUrl + val[0].photo)
}
const delImg = () => {
    tabName.value == 0 && (ruleForm.img_paths = '')
    tabName.value == 0 && (srcList.value = [])

    tabName.value == 1 && (ruleTwoForm.img_paths = '')
    tabName.value == 1 && (srcListTwo.value = [])
}
</script>
<script>
export default {
    name: "CustomerSetup",
}
</script>

<style lang="less" scoped>
.el-form {
    margin-top: @margin-lg;
}
</style>
